<template>
 <div>
    <!-- <el-button type="warning" @click="handleClick">打印</el-button  > -->
    <div ref="print">
      <barCode></barCode>
    </div>
    
 </div>
  </template>
   
  <script lang="ts" setup>
    import { ref } from 'vue';

    import { getLodop } from '/admin/utils/LodopFuncs';
  import barCode from './barCode.vue'

  // const showBar = ref(false)

   
    const print = ref();
    const handleClick = () => {
      const LODOP = getLodop();
      LODOP.PRINT_INIT('');
      // const content = ``;
      //  LODOP.ADD_PRINT_TEXT(50, 50, '60%', 30, content);
   
      // // LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4'); // 纸张方向大小
      LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, ''); // 演示设置各种样式的打印预览窗口：
      const htmlCode = print.value.innerHTML;
      const styleCode =
        '<style>table {margin:0 auto ;text-align: center; border-collapse: separate; border-spacing: 0; } th { border: 1px solid black; padding: 8px; } td { border: 1px solid black; padding: 8px; }</style>';
      // print为要打印的html ID名称：
      LODOP.ADD_PRINT_HTM(20, 0, '100%', '100%', styleCode + htmlCode);
      //   直接打印
      // LODOP.PRINT()
      // 设计模式
      //  LODOP.PRINT_DESIGN()
      LODOP.PREVIEW(); // 打印预览
    };
  </script>